<template>
    <view class="page-favorite content" :style="{ direction: $store.state.dir }">
        <status-bar></status-bar>
        <view class="page-title h1">
            {{ $t('favorite.title') }}
        </view>
        <view v-if="list.length > 0 || loadStatus == 'loading'" class="">
            <house-card @change="loadData" v-for="item in list" :detail="item" :key="item.id"></house-card>
            <u-loadmore v-if="hasMore" :status="loadStatus" />
        </view>
        <view v-else class="empty-wrapper flex-layout-col flex-center">
            <image style="height: 200px" src="../../static/list.png" mode="aspectFit"></image>
            <text style="font-size: 24px">{{ $t('nodata') }}</text>
            <text class="h3 gap-col-top2" style="text-align: center">{{ $t('text.empty.saved') }}</text>
            <u-button @click="handleHomeButton" type="primary" style="width: 120px" class="gap-col-top2">{{$t('text.search.now')}}</u-button>
        </view>
    </view>
</template>

<script>
import { savedList } from '../../lib/service';
export default {
    data() {
        return {
            currentPage: 0,
            pageSize: 100,
            loadStatus: 'loading',
            hasMore: false,
            list: []
        };
    },
    onShow() {
        this.currentPage = 0;
        this.loadData();
    },

    methods: {
        handleHomeButton() {
            uni.switchTab({
                url: '/pages/index/index'
            });
        },
        loadData() {
            if (!this.$store.state.user) {
                this.loadStatus = 'no-more';
                return false;
            }
            this.loadStatus = 'loading';
            this.currentPage = this.currentPage + 1;
            uni.showLoading();
            savedList({
                currentPage: this.currentPage,
                pageSize: this.pageSize
            })
                .then((res) => {
                    uni.hideLoading();
                    this.loadStatus = 'no-more';
                    this.hasMore = res.data.hasMore;
                    this.list = res.data.records;
                })
                .catch((res) => {
                    this.loadStatus = 'no-more';
                    uni.showToast({
                        title: 'System Error'
                    });
                });
        }
    }
};
</script>

<style lang="scss">
page {
    background-color: #f9fbff;
}
.empty-wrapper {
    height: 50vh;
}
</style>
